<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户登录</title>
	<link rel="stylesheet" type="text/css" href="assets/style/css.css">
	<script type="text/javascript" src="assets/js/jquery.min.js"></script>
</head>
<body>
	<form method='post'>
        <div class="login-form">
           <ul>
               <li class="errorMessage"></li>
               <li>用户名:
                  <input type="text" value="" id="userName" placeholder="邮箱/手机号">
               </li>
			   <li>密码:
                  <input type="password" value="" id="userPass" placeholder="请输入密码">
               </li>
               <li>
                  <button class="login-btn" id="btnSub">登录</button>
               </li>
           </ul>
        </div>
     </form>

	<script type="text/javascript" >
	   $(function() {

        $("#btnSub").click(function() {
            $(".errorMessage").text("");
            var uname = $("#userName").val();
            var upwd = $("#userPass").val();

            //账号验证
           if(uname.trim().length<1) {
                $(".errorMessage").text("账户名不能为空!");
                $("#userName").focus();
                return false;
            }

            var telphone = /^1[0-9]{10}/; //电话号码验证
            var email =/[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/; //邮箱验证
            var flagtelphone = telphone.test(uname);
            var flagemail = email.test(uname);
            if(!flagtelphone && !flagemail) {
                $(".errorMessage").text("输入的帐号名格式有误，请重新输入！")
                return false;
            }
            
            // 密码验证
             if(upwd.trim().length<1) {
                $(".errorMessage").text("密码不能为空!");
                $("#userPass").focus();
                return false;
             }

            var patternupwd = /^.{5,30}$/;    //5——30个字符
            var flagupwd = patternupwd.test(upwd);
            if(!flagupwd){
               $(".errorMessage").text("输入的密码有误，请重新输入！")
               return false;
            }
        });
    });
</script>
</body>
</html>